import { useMemo } from 'react';

import { t } from '@/locales/i18n';
import { FlowNodeOutputItemType } from '@/types/workflow/io';

function RenderFoldedOutput({ outputs }: { outputs: FlowNodeOutputItemType[] }) {
  const outputString = useMemo(() => JSON.stringify(outputs), [outputs]);
  const copyOutputs = useMemo(() => {
    return JSON.parse(outputString) as FlowNodeOutputItemType[];
  }, [outputString]);

  if (copyOutputs.length <= 0) {
    return null;
  }

  return (
    <div className="mb-2 ml-2 p-2 text-text-5">
      <div className="flex items-center gap-2">
        <span className="text-text-4">{t('common.Output')}</span>
        <div className="grid grid-cols-3 gap-2">
          {copyOutputs.map((output) => (
            <div key={output.id} className="rounded-md bg-fill-2 px-2 py-1">
              <span className="text-xs font-font-weight-400">
                {output.valueType
                  ? `${output.valueType
                      .slice(0, 3)
                      .charAt(0)
                      .toUpperCase()}${output.valueType.slice(1, 3)}`
                  : ''}
                .{output.label}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default RenderFoldedOutput;
